<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 150px;
            border: 1px solid black;
        }

        .textarea {
            width: 400px;
            height: 150px;
            border: 3px solid blue;
            padding: 0px;
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>点击下面这个div进行编辑</li>
        <li>按回车键或者触发blur来保存结果并运行其中的html代码</li>
    </ul>
    允许输入HTML代码
    <div id="box">Text</div>
    <script>
        // 可编辑的div
        // 创建一个div，它在被点击后变成 < textarea >。
        // 文本区域（textarea）允许我们编辑 < div > 里的HTML。
        // 当用户按下enter键，或者 < textarea > 失去焦点时，<textarea>会变回<div>，并且<textarea>中的内容会变成<div>中的HTML。


        //获取div元素  
        let divBox = document.getElementById('box');
        let text = null;
        //当用户点击div盒子时执行以下方法
        divBox.onclick = function () {
            changeBoxStyle();
        }
        function changeBoxStyle() {
            //创建文本域元素
            text = document.createElement('textarea');
            //为文本域元素设置类名
            text.className = 'textarea';
            //获取原div中的值 放到文本域中
            text.value = divBox.innerHTML;
            //将div盒子替换成文本域
            divBox.replaceWith(text);
            //为此文本域text设置焦点
            text.focus();
            //判断用户是否按下回车 如果按下回车 将光标清除
            text.onkeydown = function (e) {
                if (e.key === 'Enter') {
                    this.blur();
                }
            }
            //光标清除后执行相应方法
            text.onblur = function () {
                editEnd();
            }
            //此函数方法 将用户在文本域中输入的值转换为innerHTML 在div盒子中运行
            //且用replaceWith的方法将文本域转换为原本的div盒子
            function editEnd() {
                divBox.innerHTML = text.value;
                text.replaceWith(divBox);
            }
        }

    </script>
</body>

</html>